<script setup>
// import router from '@/router'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import useSettingsStore from '@/store/modules/settings'
import useCommonsStore from '@/store/modules/common'
// import { localStorage } from './utils/storage'
import { setRem } from '@/utils/rem.js'

const route = useRoute()
const settingsStore = useSettingsStore()
const commonsStore = useCommonsStore()

watch(() => settingsStore.app.colorScheme, () => {
    if (settingsStore.app.colorScheme === 'dark') {
        document.documentElement.classList.add('dark')
    } else {
        document.documentElement.classList.remove('dark')
    }
}, {
    immediate: true
})

watch(() => settingsStore.mode, () => {
    if (settingsStore.mode === 'pc') {
        settingsStore.$patch(state => {
            state.menuSidebarMobile = false
        })
    } else if (settingsStore.mode === 'mobile') {
        settingsStore.$patch(state => {
            state.menu.subMenuCollapse = true
            // state.menu.mobileMask = true
        })
    }
    document.body.setAttribute('data-mode', settingsStore.mode)
    // 初始化rem
    setRem(settingsStore.mode)
}, {
    // 默认是pc 要先处理一下
    immediate: true
})

watch(() => settingsStore.menu.menuMode, () => {
    document.body.setAttribute('data-menu-mode', settingsStore.menu.menuMode)
}, {
    immediate: true
})

watch(() => settingsStore.routerChangeEnd, () => {
    if (settingsStore.routerChangeEnd) {
        animationStart()
    }
})

const animationStart = () => {
    settingsStore.setPageAnimationState(true)
    setTimeout(() => {
        settingsStore.setPageAnimationState(false)
    }, 2000)
}

watch([
    () => settingsStore.app.enableDynamicTitle,
    () => settingsStore.title
], () => {
    if (settingsStore.app.enableDynamicTitle && settingsStore.title) {
        let title = settingsStore.title
        document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
    } else {
        document.title = import.meta.env.VITE_APP_TITLE
    }
}, {
    immediate: true
})

onMounted(() => {
    let urlString = ''
    if (import.meta.env.MODE == 'development') {
        urlString = 'http://47.101.141.77:9000/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxNjEwNyIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiLoooHpo47ms6IiLCJpYXQiOiIxNzEwOTg5OTY1IiwibmJmIjoiMTcxMDk4OTk2NSIsImV4cCI6IjE3MTA5OTcxNjUiLCJpc3MiOiJzdGVjLm9hLm93bmVyIiwiYXVkIjoic3RlYy5vYSJ9.u4t3qC57TtkyjLaoa0nBAfyaTWMbPOXDgcTAYVjW_Os#/Home'
    } else {
        urlString = document.URL
    }
    // 创建 URL 对象
    var url = new URL(urlString)
    // 获取 token 参数
    const token = url.searchParams.get('token')
    // 获取 requestId 参数
    const requestId = url.searchParams.get('requestId')
    commonsStore.setToken(token)
    commonsStore.setRequestId(requestId)

    animationStart()
    window.onresize = () => {
        settingsStore.setMode(document.documentElement.clientWidth)
        setRem(settingsStore.mode)
    }
    window.onresize()
})

</script>

<template>
    <!-- :locale="zhCn" -->
    <el-config-provider :locale="zhCn" :size="settingsStore.app.elementSize" :button="{ autoInsertSpace: true }">
        <RouterView />
    </el-config-provider>
</template>
